تقرير التوصيل

---

فايلات الفولدر

الفايلات
columns.ts
useDeliveryDriverReports.ts
DeliveryDriverReportsView.tsx

---

columns.ts

 const getColumns = (t: TFunction): ColumnDef<DeliveryDriversReport>[] => {{
            id: "receivedByUser",
            accessorKey: "receivedByUser",
            header: t("pages.reports.deliveryDriverReports.typeOfDeliverdBill"),
            size: 80,

            cell: ({ row }) => {
                const receivedByUser = row.getValue("receivedByUser") !== "";
                return (
                    <span
                        className={[
                            "inline-block px-2 py-1 text-xs font-medium rounded",
                            receivedByUser ? "bg-[#90EE90] text-[#2D2D2D]" : "bg-red-500 text-red-100",
                        ].join(" ")}>
                        {receivedByUser ? t("received") : t("notReceived")}
                    </span>
                );
            },
            meta: {
                align: "center",
            },
        } }

• هذا جزء من كود ال Columns مراح ينشرح كلة لان عبارة عن تكرار بس تغيير قيم
• هذا الفايل راح يكون مسؤول عن عرض الاعمدة مال التيبل مالتك والقيم مال الاعمدة بكل سطر
• طبعا اكو بعض ال properties حتنطيك اريحية بالتيبل ويكون قابل للتعديل اكثر مثل
  • cell : راح يخليك ترجع او تعرض الخلية الي بالسطر بالطريقة الي انت تريدها وبالستايل الي تريدة

---

useDeliveryDriverReports.ts

export const GetInfinteScrollDeliveryDriverReportsQuery = (
  params: InfiniteScrollDeliveryDriverParams
) => {
  return useInfiniteQuery<DeliveryDriversReport[]>({
    queryKey: ["infinteDeliveryDriverReports", params],
    queryFn: async ({ pageParam = 0 }) => {
      const fetchSize = 10;
      const offset = (pageParam as number) * fetchSize;
      const fetchedData = await GetFilterdDeliveryDriverReports(offset, params);
      return fetchedData;
    },
    initialPageParam: 0,
    getNextPageParam: (lastPage, allPages) => {
      const nextOffset = lastPage.length ? allPages.length : undefined;
      return nextOffset;
    },
  });
};

• هاي الدالة راح تعرض الك البيانات مال تقارير التوصيل بشكل infintiy scroll والي راح كلسع حيصير fetch من تسوي scroll الاخر الصفحة
• fetchSize : هاي راح تحدد هنا شكد تريد تجيب اسطر بكل ريكوست
• offset : هنا راح تكلة اني يا رقم بعدد الاسطر وصلت علمود تكمل مناك والي مثلا 10,20,30
• getNextPageParam : هذي الدالة راح تجيب ال offset الجاي في حال اكو واذا ماكو راح يوكف ويرجع undefined

const handleSumSelectiveRows = (
  selectedDeliveryReportId: Number,
  isChecked: boolean
) => {
  if (isChecked) {
    setSelectedRowsIds((prev) => [...prev, selectedDeliveryReportId]);
    const selectedRow = deliveryDriversReports?.pages
      .flatMap((d) => d)
      ?.find((bill) => bill.id == selectedDeliveryReportId);
    if (selectedRow) {
      setSelectedRowsSum(
        (prev) => Number(prev || 0) + selectedRow.totalPriceAfterDiscount
      );
    }
  } else {
    setSelectedRowsIds((prev) =>
      prev.filter((id) => id !== selectedDeliveryReportId)
    );
    const selectedRow = deliveryDriversReports?.pages
      .flatMap((d) => d)
      ?.find((bill) => bill.id == selectedDeliveryReportId);
    if (selectedRow) {
      setSelectedRowsSum(
        (prev) => Number(prev || 0) - selectedRow.totalPriceAfterDiscount
      );
    }
  }
};

• هذا الكود حيكون مسؤول عن الاتي
  • من المستخدم يحدد سطر او اكثر من عمود العمليات
  • راح يسوي فلات وبعدين يدور على السطر بالداتا الي عدنة
  • ثم راح يحط قيمة المجموع
  • في حال ديسوي Un-Check للبيانات راح يسوي فلتر ويجيب الكل عداها وراح ينقص قيمة الكلية ايضا

const changeToAnotherDriverMutation = useMutation({
  mutationFn: changeToAnotherDriver,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["infinteDeliveryDriverReports"],
      predicate: (query) =>
        query.queryKey[0] === "infinteDeliveryDriverReports",
    });
    setSelectedRowsIds([]);
    toast.success(t("successMessage"));
  },
  onError: (error) => {
    const errorMessage = (error as any)?.response?.data?.message;
    const errorReason = (error as any)?.response?.data[0]?.reason;
    toast.error(t("errorMessage"), {
      description: `${errorMessage}${errorReason ? `:${errorReason}` : ""}`,
    });
  },
});
//------------------------------ //
const handleChangingDriver = () => {
  if (newDriverSelectedId) {
    changeToAnotherDriverMutation.mutate({
      billId: selectedBill,
      deliveryDriverId: newDriverSelectedId,
    });
  }
};

• هذا الكود حيكون مسؤول عن تغيير السائق
• طبعا راح يحتاج المعرف مال السائق الجديد والفاتورة الحالية
• وراح يرسل الريكوست علمود يغير السائق

---

DeliveryDriverReportsView.tsx

<Dialog open={openHistoryDialog} onOpenChange={setOpenHistoryDialog}>
  <DialogContent className={`overflow-y-scroll max-h-[90vh] max-w-[50vw]`}>
    <DialogTitle className="text-[1.25rem] font-normal" dir={dir}>
      تاريخ العمليات
    </DialogTitle>
    <div className="flex flex-col gap-2">
      {history && history.length ? (
        history.map((h) => (
          <div className="p-4 border rounded-sm border-input-100">
            <div className="flex gap-2 items-center justify-between">
              <div className="font-bold">{h.user}</div>
              <div dir="ltr">{formatDateTime(h.createdAt)}</div>
            </div>
            <div>{h.process}</div>
          </div>
        ))
      ) : (
        <div className="p-4 text-2xl flex justify-center">
          <TbMoodEmpty />
        </div>
      )}
    </div>
  </DialogContent>
</Dialog>

• هذا راح يعرض التاريخ مال العمليات الي صارت على الطلب الحالي او السطر الحالي الي صارت بالصفحة مال المراقبة
• راح يعرض شنو الي صار وشوكت وغيرها من التفاصيل الي تخص تاريخ العملية
• باقي الصفحة هي مجرد UI علمود العرض وشوية لوجك يخص الكستوم هووك وجلب وعرض البيانات بشروط معينة